<template>
	<view class="content">
		<view class="coupon_list_div">
			<view class="coupon_item" v-for="(item,index) in coupon_list" :key="item.id">

				<view class="coupon_div" @click.stop="onClickCoupon(item)">
					<!-- 副券 -->
					<view class="coupon_left">
						<view style="margin: 20rpx 0 0 0;"></view>
						<view style="display: flex;align-items: center;flex-direction: column;">
							<view class="dis_value">
								<view class="dis_value_yuan_2">¥</view>
								<view>{{item.surplus_amount}}</view>
								<!-- <view class="dis_value_yuan">元</view> -->
							</view>
							<view class="fuquan_txt">余额</view>
						</view>
						<view class="youxiaoqi_div">
							<view class="youxiaoqi_txt">有效期至</view>
							<view class="youxiaoqi_data">{{item.end_time_text}}</view>
						</view>
					</view>

					<!-- 虚线分割线 -->
					<view class="dash_line"></view>

					<!-- 主券 -->
					<view class="coupon_right">
						<!-- <view class="zs_logo_txt">致胜物流</view> -->
						<view class="zs_logo_txt">{{item.coupon_name}}</view>
						<view class="rule_div">
							<view class="use_rule_txt">使用规则</view>
							<view>●使用此券不再享受其他优惠;</view>
							<view>●此券不兑换现金、不找零;</view>
							<!-- <view>●单票运单,累加不得超过100,每次仅可抵扣总运费的10%;</view> -->
							<view>●本券最终解释权归本公司所有。</view>
						</view>
						<view class="rule_div">
							<view> 全国统一服务热线:0539-8535656 大宗业务咨询电话:15263918888 </view>
							<!-- <view> 大宗业务咨询电话:15263918888 </view> -->
							<view> 临沂收货地址:兰山区工业一路与大山路交汇顺和国际物流园十号分拨(整栋) </view>
							<view> 河东收货地址:河东凤凰大街263号(原河东供销棉麻公司院内)18454963333 </view>
						</view>
					</view>
				</view>

				<view style="display: flex;justify-content: space-evenly;">
					<view class="btn_opt_1" @click.stop="onClickCoupon(item)">展示券码</view>
					<view class="btn_opt_2" @click.stop="onClickRecord(item)">使用记录</view>
				</view>

			</view>

			<view v-if="!coupon_list || coupon_list.length <= 0" style="width: 100%;text-align: center;margin: 10vh 0 0 0;">
				暂无数据~
			</view>

		</view>

		<!-- 展示优惠券二维码的弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="false">
				<view class="pop_div">
					<view class="pop_div_1">
						优惠券码
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
					</view>

					<view class="pop_div_2">
						<view class="pop_div_2_1">
							<view class="pop_div_2_1_hint">当前优惠券余额:¥{{curr_cp.surplus_amount || '0'}}</view>
						</view>
						<view>
							<!-- <image class="img_qrcode" mode="aspectFit" :src="qrdata"></image> -->
							<uqrcode ref="uqrcode" canvas-id="qrcode" :value="genQrContent()"></uqrcode>
						</view>
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">请向工作人员展示</view>
						</view>
					</view>

					<view class="pop_div_3">
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
						<view @click="onClosePop">关闭</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { getUInfo, timestampToDateFormat } from '@/util/util.js'
	export default {
		data() {
			return {
				// coupon_list: [{ money: 100.98, end_time_text: '2020.02.28' }],
				coupon_list: [],
				curr_cp: {}, // 记录当前操作的优惠券
			}
		},

		onPullDownRefresh() {
			this.getCouponList() // 打开弹窗刷新优惠券
		},

		mounted() {
			let that = this

			if (!getUInfo() || !getUInfo().token) {
				uni.redirectTo({ url: '/pages/login/login' })
			}

		},

		onShow() {
			let that = this
			that.getCouponList()
		},

		methods: {

			onClickRecord(item) {
				uni.navigateTo({ url: `/pages/index/reco_use_list?item=${JSON.stringify(item)}` })
			},

			onClickCoupon(item) {
				if (item.state == 5) {
					uni.showToast({ icon: 'none', title: '您的优惠券已使用完成' })
					return
				}
				this.onQrCode(item)
			},

			// 二维码
			onQrCode(item) {
				this.curr_cp = item
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
				this.getCouponList() // 打开弹窗刷新优惠券
			},

			onClosePop() {
				this.$refs.popup.close()
				this.getCouponList() // 关闭弹窗刷新优惠券
			},

			// 生成优惠券二维码文本数据
			genQrContent() {
				let that = this
				let myCp = {
					coupon_code: that.curr_cp.coupon_code,
					coupon_id: that.curr_cp.coupon_id,
					end_time_text: that.curr_cp.end_time_text,
					money: that.curr_cp.money,
				}
				return JSON.stringify(myCp)
			},

			// 接口:优惠券列表 $getCouponList
			async getCouponList() {
				let that = this

				let token = getUInfo().token
				uni.showLoading({ title: '加载中', mask: true, })
				let { code, msg, data } = await that.$getCouponList({ token, var_page: 1, list_rows: 999999 })
				console.log(`getCouponList...code=${code},msg=${msg},data=`, data)
				if (code == 1) {
					if (!data) return
					if (data.some(item => item.user && item.user.audit != 1)) {
						// 用户处于待审核或者被拒绝状态
						that.coupon_list = []
						uni.showModal({
							title: '提示',
							content: '您有优惠券待发放。请联系工作人员审核或稍后查看！'
						})
					} else {
						// 审核通过
						this.coupon_list = data.map((item, index) => {
							item.money = parseInt(item.money)
							// item.money = parseFloat(item.money).toFixed(1)
							// item.end_time_text = timestampToDateFormat(1000 * item.end_time)
							return item
						})
					}


				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

		}
	}
</script>

<style>
	.content {
		display: flex;
	}

	.coupon_list_div {
		display: flex;
		flex-direction: column;
		width: 100vw;
	}

	.coupon_item {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0rpx 0 24rpx 0;
	}

	.coupon_div {
		display: flex;
		height: 300rpx;
		width: calc(100% - 20rpx);
		margin: 10rpx 10rpx 0 10rpx;
		/* background-color: rgba(227, 203, 147, 1); */
		/* background-color: rgba(249, 233, 198, 1); */
		background-color: rgba(237, 216, 171, 1);
		overflow: scroll;
		/* overflow: hidden; */
		border-radius: 8rpx;
	}

	/* 副券布局 */
	.coupon_left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		flex-grow: 1;
		padding: 0 20rpx 0 20rpx;
	}

	.dis_value {
		display: flex;
		align-items: center;
		color: #553618;
		/* color: #8E6C2D; */
		font-weight: bold;
		font-size: 60rpx;
	}

	.fuquan_txt {
		color: #7A6D55;
		font-weight: bold;
		font-size: 30rpx;
	}

	.youxiaoqi_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: center;
		margin: 0 0 20rpx 0;
	}

	.youxiaoqi_txt {
		color: #56391A;
		font-size: 14rpx;
		transform: scale(0.85); // 缩放为原本大小的0.1-1倍
		transform-origin: 0 0; // 这个可不要，但建议搭配使用，作用是不因缩放导致位置有所偏移
	}

	.youxiaoqi_data {
		color: #56391A;
		/* color: #8E6C2D; */
		font-size: 18rpx;
		font-weight: bold;
		transform: scale(0.85); // 缩放为原本大小的0.1-1倍
		/* transform-origin: 0 0; // 这个可不要，但建议搭配使用，作用是不因缩放导致位置有所偏移 */
	}

	.dis_value_yuan {
		/* align-self: flex-end; */
		width: 24rpx;
		height: 24rpx;
		line-height: 24rpx;
		text-align: center;
		color: white;
		font-size: 14rpx;
		background-color: #543819;
		border-radius: 888rpx;
	}

	.dis_value_yuan_2 {
		/* align-self: flex-end; */
		text-align: center;
		font-size: 40rpx;
	}

	.dash_line {
		width: 1rpx;
		height: 100%;
		border-right: dashed 1rpx #D3B279;
	}

	/* 主券布局 */
	.coupon_right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		flex-grow: 2;
	}

	.zs_logo_txt {
		align-self: flex-end;
		margin: 10rpx 16rpx 0 0;
		/* color: #8E6C2D; */
		color: #56391A;
		font-size: 24rpx;
		font-weight: bold;
	}

	.rule_div {
		align-self: flex-start;
		margin: 0 0 0 16rpx;
		color: #56391A;
		font-size: 18rpx;
		transform: scale(0.85); // 缩放为原本大小的0.1-1倍
		transform-origin: 0 0; // 这个可不要，但建议搭配使用，作用是不因缩放导致位置有所偏移
	}

	.use_rule_txt {
		border-bottom: solid 1rpx #56391A;
		width: 100rpx;
		font-size: 22rpx;
		font-weight: bold;
		margin: 0 0rpx 4rpx 0;
	}

	.btn_opt_1 {
		width: 40%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: rgba(237, 216, 171, 1);
		/* background-color: red; */
		border: solid 1rpx rgba(237, 216, 171, 1);
		border-radius: 100rpx;
		margin: 10rpx 0 0 0;
	}

	.btn_opt_2 {
		width: 40%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #ccc;
		/* background-color: red; */
		border: solid 1rpx #eee;
		border-radius: 100rpx;
		margin: 10rpx 0 0 0;
	}


	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 75vw;
		height: 50vh;
		background-color: white;
		border-radius: 20rpx;
	}

	.pop_div_1 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}

	.pop_div_3 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}
</style>